* {
  font-family: "sans-serif";
  margin: 0;
  padding: 0;
}
body,
.container {
  width: 100vw;
  height: 100vh;
}
/* main */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #252839;
}

ul li {
  position: relative;
  list-style: none;
  line-height: 60px;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  color: #fff2;
  font-size: 40px;
  /* font-weight: 700; */
  letter-spacing: 0.5em;
  transition: 1s ease;
  margin-bottom: 40px;
  text-transform: capitalize;
}
ul li:hover::before {
  color: var(--clr);
  width: 100%;
  /* filter: drop-shadow(0 0 25px val(--clr)); */
  text-shadow: 0 0 15px var(--clr);
}
ul li::before {
  content: attr(data-text);
  color: var(--clr);
  position: absolute;
  width: 0;
  overflow: hidden;
  border-right: 6px solid;
  transition: all 0.5s ease;
}

ul li span {
  position: relative;
  animation: animateText linear infinite;
}
ul:hover li span {
  opacity: 0.5;
  animation-play-state: paused;
}

@keyframes animateText {
  0%,
  20% {
    color: #fff2;
    text-shadow: 0 0 0 var(--clr);
  }
  20.001%,
  79.999% {
    color: var(--clr);
    text-shadow: 0 0 15px var(--clr);
  }
  80%,
  10% {
    color: #fff2;
    text-shadow: 0 0 0 var(--clr);
  }
}
